<template>
	<div style="padding: 20px;">
		<transition name="custom-classes-transition" enter-active-class="animated fadeInDown" leave-active-class="animated fadeOutUp" >
			<addclass :importeditid="editid" v-on:chance="chance"  v-if="show" style="margin-bottom: 20px;"><span>{{addoredit}}</span></addclass>
		</transition>
		
	    <div style="position: relative;">
	    	<Row>
		        <Col span="18" style="text-align: left;">
		        	<span>属性筛选：</span>
		        	<RadioGroup  v-model="branch" type="button" @on-change="changeselect">
		        		<Radio v-for="item in branchlist" :key="item.label" :label="item.value">{{item.label}}</Radio>
				    </RadioGroup>
		        </Col>
		        <Col span="6" style="text-align: right;">
		        	<Button type="primary" icon="plus" @click="addclass">添加班级</Button>
		        </Col>
		    </Row>
		    <Row>
		        <Col span="24" style="text-align: left;margin-top:15px;">
		        	<span>年级筛选：</span>
		        	<RadioGroup v-model="selectgrade" type="button" @on-change="changeselect">
		        		<Radio v-for="item in gradelist" :key="item.label" :label="item.value">{{item.label}}</Radio>
				        
				    </RadioGroup>
		        </Col>
		    </Row>
		    <Spin size="large" fix v-if="selectloadingshow"></Spin>
	    </div>
	    <Row v-if="classlist.length !=0?false:true" style="margin-top:30px;">
	        <Col span="24">{{showtext}}</Col>
	    </Row> 
	    <div style="position: relative;min-height: 500px;">
		    <div v-for="item in classlist" :key="item.id" style="text-align: left;margin-top:15px;line-height: 38px;padding-left: 32px;color: #666;position: relative;background-color: #f7f7f7;border-radius: 3px;border: 1px solid #dddee1;">
	            <!--<Panel>-->		
	            	<span>班级:{{item.no}}</span>
	            	<span style="margin-left: 10%;">所属年段:{{item.grade}}年段</span> 
	            	<span style="margin-left: 10%;">所属年份:{{item.year}}届</span>
	        		<Row >
				        <Col span="12">科目：{{item.subject}}</Col> 
				        <Col span="9" >
				        	<span>
				        		<span style="margin-left: 10px;">属性:{{item.branch}}</span>
				        	</span>
				        </Col>
				        <Col span="2">
			        		<Button @click.stop="editclass(item.id)"  type="ghost" shape="circle" icon="edit"></Button>
	        				<Button @click.stop="delclass(item.id)" type="ghost" shape="circle" icon="trash-a"></Button>
				        </Col>
				    </Row> 
	                <!--<div slot="content" > 
	                	<Row v-for="items in item.allTeacher" :key="items.teacher" style="margin-top:5px;border-bottom:1px solid #e9eaec;" > 
					        <Col span="6" offset="1">{{items.subject}}</Col> 
					        <Col span="4" offset="10">
					        	科任教师：{{items.teacher}}					        	
					        </Col> 
					    </Row>
					    
	                </div>-->
	            <!--</Panel>-->
	             
		    </div>
		    <Spin size="large" fix v-if="listShow"></Spin>
	    </div>
	</div>
</template>

<script>
	import addclass from '@/components/performance/basicsetting/Addclass'
	import api from "@/components/js/Apidomain.js"
	export default{
		data(){
			return{
				
				addoredit:"添加班级",
				editid:"",
				
				selectloadingshow:false,		//控制两个select的加载中的显示和隐藏
				show:false,						//切换添加班级面板的显示跟隐藏
				listShow:false,					//班级列表的加载中显示隐藏
				showtext:"请选择属性和年级",
				branch:"",						//选择文理科的select
				selectgrade:"",					//选择年级的select
				
				branchlist: [
//					{value: '1',label: '不分科'},
//					{value: '2',label: '理科'},
//                  {value: '3',label: '文科'},   
                ],
                gradelist: [
//					{value: '1',label: '全部年级'},
//					{value: '2',label: '初一年级'},
//                  {value: '3',label: '初二年级'},
//                  {value: '4',label: '初三年级'},
//                  {value: '5',label: '高一年级'},
//                  {value: '6',label: '高二年级'},
//                  {value: '7',label: '高三年级'},  
                ],
                classlist:[
                
                ]
			}
		},
		components:{
			addclass,
		},
		created(){
			this.getselectinfo();
			
		},
		methods:{
			addclass:function(){
				this.addoredit = "新增班级信息"
				this.editid = "",
				this.show = true;
			},
			//两条select改变触发的函数
			changeselect:function(){
//				//console.log(this.branch)
//				//console.log(this.selectgrade);
				this.getclasslist();
			},
			chance:function(){
				this.show = false;
				this.getclasslist();
			},
			editclass:function(value){
				this.addoredit = "编辑班级信息";
				this.editid = value;
				this.show = true;
			},
			delclass:function(value){
				this.$Modal.confirm({
                    title: '确定删除',
                    content: '<p>确定删除这一条班级信息吗</p>',
                    onOk: () => {
                        this.$Message.loading({
		                    content: '正在删除中',
		                    duration: 0
		                });
		                
		                //删除年级的接口
		                var self = this;
		            	let url = api.apidomain+'/tqes/web/tchClasses/deleteClasses';
		            	this.$http.post(url, {id:value}).then(function(response) {
							if(response.data.success == true){
								self.$Message.destroy();
								self.$Message.success({
				                    content: '删除成功',
				                    duration: 10,
				                    closable: true
		               			})
								self.getclasslist();
				            }else if(response.data.success == false){
				            		self.$Message.error({
										content: response.data.msg,
										duration: 10,
										closable: true
									});	
				            	}
							})
							.catch(function(error) {
								self.$Message.error({
									content: '系统发生错误：错误码00021',
									duration: 10,
									closable: true
								});
							});
		                
		                
		                
                    },
                    onCancel: () => {
//                      this.$Message.info('Clicked cancel');
                    }
                });
			},
			getselectinfo:function(){
				this.selectloadingshow = true;
				var self = this;
            	let url = api.apidomain+'/tqes/web/tchClasses/getClassesSelectParamInfo';
            	this.$http.post(url, {}).then(function(response) {
					if(response.data.success == true){
//						//console.log(response.data.data.gradeList)
						self.gradelist = response.data.data.gradeList;
						self.branchlist = response.data.data.subjectList;
						
						//进入页面默认加载select的第一项
						if(self.gradelist.length != 0 && self.branchlist.length != 0){
							self.branch = self.branchlist[0].value;	
							self.selectgrade = 	self.gradelist[0].value;
							self.getclasslist();
						}
						
						self.selectloadingshow = false;
						
	            }else if(response.data.success == false){
	            		self.$Message.error({
								content: response.data.msg,
								duration: 10,
								closable: true
							});	
	            	}
	            	
				})
				.catch(function(error) {
					self.$Message.error({
							content: '系统发生错误：错误码00022',
							duration: 10,
							closable: true
						});
				});
			},
			getclasslist:function(){
				this.listShow = true;
				var self = this;
            	let url = api.apidomain+'/tqes/web/tchClasses/getClassesList';
            	this.$http.post(url, {
            		"id":this.selectgrade, //年级id
					"isBranch":this.branch  //不分科 、理科、 文科
            	}).then(function(response) {
					if(response.data.success == true){
						self.classlist = response.data.data;
//						////console.log(response.data.data)
						if(self.classlist.length == 0){
							self.showtext = "所选属性和年级数据为空"
						}
						self.listShow = false;
		            }else if(response.data.success == false){
		            		self.$Message.error({
								content: response.data.msg,
								duration: 10,
								closable: true
							});
		            		self.listShow = false;
		            	}
					})
					.catch(function(error) {
						self.$Message.error({
							content: '系统发生错误：错误码00023',
							duration: 10,
							closable: true
						});
						self.listShow = false;
					});
			}
		}
	}
</script>

<style>
.ivu-collapse{
	text-align: left;	
}
.ivu-collapse-content>.ivu-collapse-content-box{
	padding:5px !important;
}
.ivu-collapse > .ivu-collapse-item > .ivu-collapse-header{
	height: auto !important;
}
</style>